<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>菜单管理</title>
  <link rel="stylesheet" href="../../css/sysmgmt(系统管理-菜单管理）.css" />
  <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css" />
  <script src="../../lib/JQuery/jquery-1.11.3.js"></script>
  <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../../src/font/font-index/iconfont.css">
  <script src="../../src/font/font-index/iconfont.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <div id="searchDiv">
          <form class="form-inline" action="#">
            <div class="form-group">
              <input type="text" id="searchName" class="form-control" placeholder="请输入菜单名称" />
            </div>
            <div class="form-group">
              <select id="searchType" class="form-control">
                <option value="0">选择类型</option>
                <option value="1">菜单</option>
                <option value="2">接口</option>
              </select>
            </div>
            <div class="form-group">
              <select id="searchState" class="form-control">
                <option value="0">选择状态</option>
                <option value="1">启用</option>
                <option value="2">禁用</option>
              </select>
            </div>
            <button class="btn btn-default" id="searchBtn">
              <span class="glyphicon glyphicon-search"></span> 查询
            </button>
            <button class="btn btn-default" id="reset">
              <span class="glyphicon glyphicon-repeat"></span> 清空
            </button>
          </form>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <div id="optionDiv">
          <button class="btn btn-default" id="append" data-toggle="modal" data-target="#add">
            + 新增菜单
          </button>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <table id="tableHead" class="table table-hover">
          <thead>
            <tr>
              <td>ID</td>
              <td align="center">菜单名称</td>
              <td align="center">菜单类型</td>
              <td align="center">图标</td>
              <td align="center">权限标识</td>
              <td align="center">路由</td>
              <td align="center">菜单状态</td>
              <td align="center">操作</td>
            </tr>
          </thead>
          <tbody id="tableDiv">
            <!-- 这里渲染数据 -->
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- 删除模态框 -->
  <div class="modal fade" id="delDiv" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          是否确认删除？
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            关闭
          </button>
          <button type="button" id="del" class="btn btn-primary">删除</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 添加模态框 -->
  <div class="modal fade" id="add" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <form>
            <div class="form-group">
              类型：
              <label id="appendType">
                <input type="radio" value="菜单" name="type"> 菜单
                <input type="radio" value="接口" name="type"> 接口
              </label>
            </div>
            <div class="form-group">
              <label for="recipient-price" class="control-label"><span>*</span>菜单名称：</label>
              <input type="text" class="form-control" id="appendName" placeholder="请输入菜单名称" />
            </div>
            <div class="form-group">
              <label for="recipient-price" class="control-label"><span>*</span>权限标识：</label>
              <input type="text" class="form-control" id="appendPermission" placeholder="请输入权限标识" />
            </div>
            <div class="form-group">
              <label for="recipient-price" class="control-label"><span>*</span>图标：</label>
              <input type="text" class="form-control" id="appendIcon" placeholder="选择图标" />
            </div>
            <div class="form-group">
              <label for="recipient-price" class="control-label"><span>*</span>路由：</label>
              <input type="text" class="form-control" id="appendLuyou" />
            </div>
            <div class="form-group">
              菜单隐藏：
              <label id="appendConceal">
                <input type="radio" value="显示" name="conceal"> 显示
                <input type="radio" value="隐藏" name="conceal"> 隐藏
              </label>
            </div>
            <div class="form-group">
              状态：
              <label id="appendState">
                <input type="radio" value="启用" name="state"> 启用
                <input type="radio" value="禁用" name="state"> 禁用
              </label>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            取消
          </button>
          <button type="button" id="save" class="btn btn-primary">
            保存
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改模态框 -->
  <div class="modal fade" id="amendDiv" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <form>
            <div class="form-group">
              类型：
              <label id="amendType">
                <input type="radio" value="菜单" name="type" id="caidan"> 菜单
                <input type="radio" value="接口" name="type" id="jiekou"> 接口
              </label>
            </div>
            <div class="form-group">
              <label for="recipient-price" class="control-label"><span>*</span>菜单名称：</label>
              <input type="text" class="form-control" id="amendName" />
            </div>
            <div class="form-group">
              <label for="recipient-price" class="control-label"><span>*</span>图标：</label>
              <input type="text" class="form-control" id="amendIcon" />
            </div>
            <div class="form-group">
              <label for="recipient-price" class="control-label"><span>*</span>权限标识：</label>
              <input type="text" class="form-control" id="amendPermission" />
            </div>
            <div class="form-group">
              <label for="recipient-price" class="control-label"><span>*</span>路由：</label>
              <input type="text" class="form-control" id="amendLuyou" />
            </div>
            <div class="form-group">
              菜单隐藏：
              <label id="amendConceal">
                <input type="radio" value="显示" name="conceal" id="xianshi"> 显示
                <input type="radio" value="隐藏" name="conceal" id="yincang"> 隐藏
              </label>
            </div>
            <div class="form-group">
              状态：
              <label id="amendState">
                <input type="radio" value="启用" name="state" id="qiyong"> 启用
                <input type="radio" value="禁用" name="state" id="jinyong"> 禁用
              </label>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            取消
          </button>
          <button type="button" id="xiugai" class="btn btn-primary">
            保存
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    let arr = [
      { id: 1, name: '首页', type: '菜单', icon: 'shouye', permission: 'admin-index', luyou: '/admin/index', state: '启用', conceal: '显示' },
      { id: 2, name: '系统管理', type: '菜单', icon: 'xitong', permission: 'admin-system', luyou: 'admin/system', state: '启用', conceal: '显示' },
      { id: 3, name: '药品管理', type: '菜单', icon: 'yaopin', permission: 'admin-drugs', luyou: 'admin/drugs', state: '禁用', conceal: '显示' },
      { id: 4, name: '订单管理', type: '菜单', icon: 'dingdan', permission: 'admin-order', luyou: 'admin/order', state: '启用', conceal: '显示' },
      { id: 5, name: '文章管理', type: '菜单', icon: 'wenzhang', permission: 'admin-article', luyou: 'admin/article', state: '启用', conceal: '显示' },
      { id: 6, name: '医院管理', type: '菜单', icon: 'yiyuan', permission: 'admin-hospital', luyou: 'admin/hospital', state: '启用', conceal: '显示' },
      { id: 7, name: '专家管理', type: '菜单', icon: 'zhuanjia', permission: 'admin-expert', luyou: 'admin/expert', state: '启用', conceal: '显示' },
      { id: 7, name: '科室管理', type: '菜单', icon: 'keshi', permission: 'admin-Department', luyou: 'admin/Department', state: '启用', conceal: '显示' },
      { id: 8, name: '疾病管理', type: '菜单', icon: 'jibing', permission: 'admin-disease', luyou: 'admin/disease', state: '禁用', conceal: '显示' },
      { id: 9, name: '用户管理', type: '菜单', icon: 'yonghu', permission: 'admin-user', luyou: 'admin/user', state: '启用', conceal: '显示' },
    ]

    let searchArr = []
    let delId
    let xiugaiId
    search()

    // 筛选
    $('#searchBtn').click(function () {
      search()
    })
    function search() {
      let searchName = $('#searchName').val()
      let searchType = $('#searchType option:selected').text()
      let searchState = $('#searchState option:selected').val()
      // console.log(searchName, searchType, searchState)
      searchArr = [...arr]
      if (searchName != '') {
        for (let i = 0; i < searchArr.length; i++) {
          if (searchName != searchArr[i].name) {
            searchArr.splice(i, 1)
            i--
          }
        }
      }
      if (searchType != '选择类型') {
        for (let i = 0; i < searchArr.length; i++) {
          if (searchArr[i].type != searchType) {
            searchArr.splice(i, 1)
            i--
          }
        }
      }
      if (searchState != 0) {
        for (let i = 0; i < searchArr.length; i++) {
          if (searchArr[i].state != searchState) {
            searchArr.splice(i, 1)
            i--
          }
        }
      }
      // console.log(searchArr)
      show(searchArr)
    }

    // 重置
    $('#reset').click(function () {
      $('#searchName').val("")
      $('#searchType option:first-child').prop('selected', 'selected')
      $('#searchState option:first-child').prop('selected', 'selected')
      search()
    })

    // 根据数据渲染table的dom节点  菜单下面有子菜单的应在名称前面添加图标
    function show(data) {
      $('#tableDiv').html('')
      for (let i = 0; i < data.length; i++) {
        $('#tableDiv').append(`
          <tr>
            <td>${data[i].id}</td>
            <td align="center">${data[i].name}</td>
            <td align="center">${data[i].type}</td>
            <td align="center">${data[i].icon}</td>
            <td align="center">${data[i].permission}</td>
            <td align="center">${data[i].luyou}</td>
            <td align="center">
              ${data[i].state == '启用'
              ? `<input dataStu = "${data[i].id}" class="switch-btn switch-btn-animbg" type="checkbox" checked>`
              : `<input dataStu = "${data[i].id}" class="switch-btn switch-btn-animbg" type="checkbox">`}
            </td>
            <td align="center">
              <span>添加子菜单</span>
              <span data-toggle="modal" data-target="#amendDiv" 
                data-whatever="@mdo" id = 'amendBtn' onclick = 'xiugaiDefault(${JSON.stringify(data[i])})'>
                  编辑
              </span>
              <span data-toggle="modal" data-target="#delDiv" 
                data-whatever="@mdo" id = 'delBtn' onclick = 'getDelId(${data[i].id})'>
                  删除
              </span>
            </td>  
          </tr>
        `)
      }
    }

    // 删除
    function getDelId(id) {
      delId = id;
      // console.log(delId)
    }

    $("#del").click(function () {
      for (let i = 0; i < searchArr.length; i++) {
        if (searchArr[i].id == delId) {
          arr.splice(i, 1);
        }
      }
      searchArr = [...arr]
      $("#delDiv").modal("hide");
      show(searchArr)
    });

    // 新增
    $("#save").click(function () {
      let addObj = {
        id: searchArr.length + 1,
        type: $('#add').find('input[name=type]:checked').val(),
        name: $("#add").find(".modal-body #appendName").val(),
        permission: $("#add").find(".modal-body #appendPermission").val(),
        icon: $("#add").find(".modal-body #appendIcon").val(),
        luyou: $("#add").find(".modal-body #appendLuyou").val(),
        conceal: $('#add').find('input[name=conceal]:checked').val(),
        state: $('#add').find('input[name=state]:checked').val(),
      };
      console.log(addObj)
      // // 重新渲染
      arr.push(addObj);
      searchArr = [...arr];
      show(searchArr)

      // 隐藏添加模态框
      $("#add").modal("hide");
    });

    // 编辑
    function xiugaiDefault(stuObj) {
      console.log(stuObj)
      stuObj.type == '菜单'
        ? $('#caidan').prop("checked", true)
        : $('#jiekou').prop("checked", true);
      $('#amendDiv')
        .find('.modal-body #amendName')
        .val('' + stuObj.name + '');
      $('#amendDiv')
        .find('.modal-body #amendIcon')
        .val('' + stuObj.icon + '');
      $('#amendDiv')
        .find('.modal-body #amendPermission')
        .val('' + stuObj.permission + '');
      $('#amendDiv')
        .find(".modal-body #amendLuyou")
        .val('' + stuObj.luyou + '');
      stuObj.conceal == '显示'
        ? $('#xianshi').prop("checked", true)
        : $('#yincang').prop("checked", true);
      stuObj.state == '启用'
        ? $('#qiyong').prop("checked", true)
        : $('#jinyong').prop("checked", true);
      xiugaiId = stuObj.id
      // console.log(xiugaiId)
    }

    $('#xiugai').click(function () {
      let type = $('input[name=type]:checked').val()
      let name = $('#amendName').val()
      let icon = $('#amendIcon').val()
      let permission = $('#amendPermission').val()
      let luyou = $('#amendLuyou').val()
      let conceal = $('input[name=conceal]:checked').val()
      let state = $('input[name=state]:checked').val()
      console.log(type, name, icon, permission, luyou, conceal, state)
      for (let i = 0; i < searchArr.length; i++) {
        if (xiugaiId == searchArr[i].id) {
          searchArr[i].type = type
          searchArr[i].name = name
          searchArr[i].icon = icon
          searchArr[i].permission = permission
          searchArr[i].luyou = luyou
          searchArr[i].conceal = conceal
          searchArr[i].state = state
        }
      }
      // 隐藏修改模态框
      $("#amendDiv").modal("hide");
      show(searchArr)
    });
  </script>
</body>

</html>